<template>
  <div>
    <my-header></my-header>
    <div>
      <!-- 列表部分 -->
      <div class="list-content">
        <div class="list-part-list">
          <div class="list-part">
            <ul class="list-ul clearfix">
              <li class="list-item" v-for="(v,i) of this.l" :key="i">
                <a href="#">
                  <img :src="v.pic" alt="" />
                  <p class="item-name">{{v.title}}</p>
                  <p class="item-about">
                    <span class="pack-spec">{{v.spec}}</span>&nbsp;
                  </p>
                  <p class="item-info">
                    <span class="item-price"> ￥&nbsp;{{v.price}}&nbsp;/箱 </span>
                  <router-link :to="`/detail/${v.lid}`"> <span class="item-buy" > 立即抢购> </span></router-link> 
                  </p>
                </a>
              </li>
            
            </ul>
          </div>
          <!-- 底部翻页 -->
          <div class="page clearfix">
            <div class="page-div d-flex justify-content-center">
              <span class="disabled">上一页</span>
              <span class="zxfPagenum current">1</span>
              <a href="javascript:;" class="zxfPagenum nextpage"></a>
              <a href="javascript:;" class="nextbtn">下一页</a>
              <span style="line-height: 35px"> 共 <b>2</b> 页 </span>
              <span>
                到第
                <input type="text" name="" id="" class="zxfinput" value="1" />
                页&nbsp;&nbsp;&nbsp;
              </span>
              <span class="zxfokbtn">确定</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      l:[],
    }
  },
  mounted() {
    axios.get("/product/list").then((result)=>{
      console.log(result.data);
      [...this.l]=result.data;
      console.log(this.l);
    })
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  font: 12px/1 Tahoma, Helvetica, Arial, "微软雅黑", Arial, "\5b8b\4f53",
    sans-serif;
}

/* 列表部分 */
.list-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
  background-color: #fff;
}

.active-part {
  margin: 20px 0 80px 0;
  position: relative;
  width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
}

.list-ul {
  padding: 30px 0 30px 0;
}

.list-item {
  position: relative;
  float: left;
  width: 270px;
  height: 400px;
  margin: 20px 7px 10px 20px;
  background: #fff;
}

.list-item a {
  cursor: pointer;
  text-decoration: none;
}

.list-item a img {
  width: 100%;
  height: 270px;
  border: 1px solid gray;
}

.item-name {
  height: 36px;
  line-height: 27px;
  overflow: hidden;
  color: #d61a39;
  font-size: 16px;
  width: 80%;
  padding: 8px 0;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid #d61a39;
}

.item-about {
  width: 80%;
  padding: 8px 0;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid #d61a39;
  color: black;
}

.item-info {
  width: 80%;
  padding: 5px 0;
  margin: 5px auto;
  text-align: center;
}

.item-info .item-price {
  font-size: 18px;
  color: #d61a39;
}
.item-info .item-buy {
  font-size: 14px;
  width: 100px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  background: #d61a39;
  text-align: center;
  color: #fff;
}

/* 底部翻页列表部分 */
.page-div {
  text-align: center;
  color: #999999;
  margin: 0 auto;
}

.page-div span,
.page-div a {
  display: inline-block;
  box-sizing: border-box;
}

.page-div span:nth-child(2),.page-div span:last-child:hover{
  border: 1px solid #d61a39;
}

.page-div a:hover{
  border: 1px solid #d61a39;
}
.page-div a {
  text-decoration: none;
}

/* 禁用 */
span.disabled {
  height: 35px;
  width: 65px;
  line-height: 35px;
  background: #f2f2f2;
  margin: 0 5px;
}

/* 计算下一页页面数量 */
.zxfPagenum {
  color: #999999;
  background: #ffffff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #dfdfdf;
  margin: 0 5px;
}

/* 下一页按钮 */
.nextbtn {
  color: #999999;
  background: #ffffff;
  width: 65px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #dfdfdf;
}

/* 当选中当前页面显示 */
.current {
  color: #ffffff;
  background: #d71f1b;
  border: none;
}

.zxfinput {
  width: 35px;
  height: 35px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #dfdfdf;
  margin: 0 12px;
}

input[type="text"],
input[type="number"],
input[type="password"] {
  border: 1px solid #ccc;
}

input[type="text"]:hover{
  border: 1px solid black;
}
.zxfokbtn {
  width: 45px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #dfdfdf;
  cursor: pointer;
}
</style>